<template>
  <div class="mobileIndex">
    <v-touch v-on:swipeup="next" v-on:swipedown="last" v-bind:enabled="true">
      <div class="box">
        <transition :name="transitionName">
          <router-view></router-view>
        </transition>
      </div>
      <div class="useNow">
        <div class="useBtn" @click="goWhere('mobileReg')">
          <span>立即试用</span>
          <em>
            <i></i>
          </em>
        </div>
        <i class="downTip" v-if="pageIndex != 5"></i>
      </div>
    </v-touch>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import VueTouch from 'vue-touch'
Vue.use(VueTouch, { name: 'v-touch' })
export default {
  name: 'mobileIndex',
  data () {
    return {
      pageArr: ['mobileStep1', 'mobileStep2', 'mobileStep3', 'mobileStep4', 'mobileStep5', 'mobileStep6'],
      preRouteName: ''
    }
  },
  computed: {
    pageIndex () {
      return this.pageArr.indexOf(this.$route.name)
    },
    transitionName () {
      let nowIndex = this.pageArr.indexOf(this.$route.name)
      let toIndex = this.pageArr.indexOf(this.preRouteName)
      if (toIndex < nowIndex) {
        return 'slide-down'
      } else {
        return 'slide-up'
      }
    }
  },
  methods: {
    goWhere (route) {
      // this.$tips.show({
      //   message: '切换成功'
      // })
      this.$router.push({ name: route, query: this.$route.query })
    },
    next () {
      if (this.pageIndex <= 5) {
        this.$router.push({ name: this.pageArr[this.pageIndex + 1], query: this.$route.query })
      }
    },
    last () {
      if (this.pageIndex >= 1) {
        this.$router.push({ name: this.pageArr[this.pageIndex - 1], query: this.$route.query })
      }
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.preRouteName = from.name
    next()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileIndex
  position absolute
  left 0
  top 0
  width 100%
  height 100%
  .box
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    touch-action none
  .useNow
    position absolute
    bottom 1.3rem
    left 0
    height 4.3rem
    width 100%
    .useBtn
      position absolute
      left 0
      right 0
      margin 0 auto
      width 50%
      height 4.3rem
      line-height 4.3rem
      text-align center
      border-radius 2.2rem
      background linear-gradient(270deg, rgba(210, 95, 58, 1) 0%, rgba(243, 184, 100, 1) 100%)
      box-shadow 1px 3px 10px -3px rgba(0, 0, 0, 0.47)
      span
        position absolute
        left 2.4rem
        font-size 1.9rem
        color #ffffff
        font-weight bold
      em
        position absolute
        right 2rem
        top 0
        bottom 0
        margin auto 0
        width 2.9rem
        height 2.9rem
        border-radius 50%
        background #B44624
        i
          position absolute
          top 0
          bottom 0
          right 0
          left 0
          margin auto
          width 60%
          height 2px
          border-radius 1px
          background #ffffff
          &:after
            content ''
            position absolute
            right 0
            top -3px
            width 6px
            height 6px
            border-top 2px solid #ffffff
            border-right 2px solid #ffffff
            border-radius 1px
            transform rotate(45deg)
  .downTip
    position absolute
    bottom 3rem
    right 3rem
    animation move 1.5s infinite
    @keyframes move
      0%
        opacity 0
        bottom 2rem
      30%
        opacity 1
        bottom 3rem
      100%
        opacity 0
        bottom 4rem
    &:before
      content ''
      position absolute
      right 0
      top 0
      width 1rem
      height 1rem
      border-top 2px solid #ffffff
      border-right 2px solid #ffffff
      border-radius 1px
      transform rotate(-45deg)
    &:after
      content ''
      position absolute
      right 0
      top 8px
      width 1rem
      height 1rem
      border-top 2px solid #ffffff
      border-right 2px solid #ffffff
      border-radius 1px
      transform rotate(-45deg)
.slide-up-enter, .slide-down-leave-active
  // opacity 0
  transform translate3d(0, -100%, 0)
.slide-up-leave-active, .slide-down-enter
  // opacity 0
  transform translate3d(0, 100%, 0)
</style>
